<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>多重散点图</title>
	<script src="../static/js/echarts.js"></script>
	<!-- <script src="../static/js/echarts.min.js"></script> -->
</head>
<body>
	<div id="main" style="width: 600px;height:400px;"></div>
</body>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

/* 
图形（symbol）指的是散点图中数据“点”的形状。有三类图形可选，一种是 ECharts 内置形状，第二种是图片，第三种是 SVG 的路径。

ECharts 内置形状包括：圆形'circle'、矩形'rect'、圆角矩形'roundRect'、三角形'triangle'、菱形'diamond'、大头针形'pin'、箭头形'arrow'
使用内置形状时，只要将 symbol 属性指定为形状名称对应的字符串即可。

如果想要将图形指定为任意的图片，以 'image://' 开头，后面跟图片的绝对或相对地址。形如：'image://http://example.com/xxx.png' 或 'image://./xxx.png'。

除此之外，还支持 SVG 的路径作为矢量图形，将 symbol 设置为以 'path://' 开头的 SVG 路径即可。使用矢量图形的好处是，图片不会因为缩放而产生锯齿或模糊，
并且通常而言比图片形式的文件大小更小。路径的查看方法为，打开一个 SVG 文件，找到形如 <path d="M… L…"></path> 的路径，将 d 的值添加在 'path://' 后即可。
*/

// 指定图表的配置项和数据
var option = {
	tooltip: {},
	xAxis: {
		data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
	},
	yAxis: {},
	series: [
		{
			type: 'scatter',
			data: [220, 182, 191, 234, 290, 330, 310],
			symbolSize: 14,
			symbol: 'path://M51.911,16.242C51.152,7.888,45.239,1.827,37.839,1.827c-4.93,0-9.444,2.653-11.984,6.905 c-2.517-4.307-6.846-6.906-11.697-6.906c-7.399,0-13.313,6.061-14.071,14.415c-0.06,0.369-0.306,2.311,0.442,5.478 c1.078,4.568,3.568,8.723,7.199,12.013l18.115,16.439l18.426-16.438c3.631-3.291,6.121-7.445,7.199-12.014 C52.216,18.553,51.97,16.611,51.911,16.242z'
		},
		{
			type: 'scatter',
			data: [110, 100, 150, 120, 130, 150, 140],
			symbolSize: 14,
			symbol: 'triangle'
		}
	]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</html>
